<template>
  <div class="bg">
    <div ref="barChartData" class="bar"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  GridComponent, 
  BarChart, 
  CanvasRenderer
]);

export default {
  name: "BarChartData",
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
    times: {
      type: Number,
      default: 0
    },
  },
  components: {

  },
  data() {
    return {
      valueList: [],
      xAxisList: [],
      option: {
        title: {
          text: '交易品类重量(公斤)',
          left: 10,
          top: 10,
          textStyle: {
            color: 'white'
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b} : {c}公斤',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'value',
          min: 0, // 坐标轴刻度最小值。
          max: 100000, // 坐标轴刻度最大值。
          splitNumber: 5, // 坐标轴的分割段数，是一个预估值，实际显示会根据数据稍作调整。
          // interval: 5, // 强制设置坐标轴分割间隔。
          axisTick: {
            show: false
          },
          axisLine: {
            show: false // 去除轴线
          },
          splitLine: {
            show:true,
            lineStyle: {
              color: "#012f4a"
            }
          },
          data: [],
          axisLabel: {
            color: "white",
            fontSize: 12,
            rotate: 45,
          }
        },
        yAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            color: "white",
          },
          axisTick: {
            show: false,
            length: 10
          },
          axisLine: {
            show: false // 去除轴线
          },
          splitLine: {
            lineStyle: {
              color: "#012f4a"
            }
          },
          axisLabel: {
            color: "white",
            fontSize: 12,
          },
        },
        animation: false,
        series: [
          {
            type: 'bar',
            data: [],
            // barWidth: 10,
            label: {
              show: true,
              color: 'white',
              fontStyle: 'normal',
              position: 'insideLeft',
              valueAnimation: true
            }
          }
        ]
      }
    }
  },
  computed: {

  },
  watch: {
    times(val) {
      if (val > 0 && this.dataList.length > 0) {
        this.$nextTick(() => {
          this.init()
        })
      }
    },
    dataList(val) {
      if (val.length > 0 && this.times > 0) {
        this.$nextTick(() => {
          this.init()
        })
      }
    }
  },
  methods: {
    init() {
      this.handleList()
      this.option.series[0].data = this.valueList
      this.option.yAxis.data = this.xAxisList
      
      var chartDom = this.$refs.barChartData;
      var myChart = echarts.init(chartDom);
      myChart.setOption(this.option)
    },
    handleList() {
      if (this.dataList && this.dataList.length > 0) {
        this.valueList = []
        this.xAxisList = []

        this.dataList.forEach((item) => {
          var num = Number((item.num * this.times).toFixed(1))
          this.valueList.push(num)
          this.xAxisList.push(item.name.slice(0, 2))
        })
      }
    }
  },
  created() {
    
  },
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
  .bg {
    position: relative;
    height: 300px !important;
    overflow: hidden;
  }
  .bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 380px !important;
    height: 100%;
  }
</style>